<template>
	<div class="group-booking" v-if='dataGroup'>
		<loadmore :top-method="refresh" :bottom-all-loaded="allLoaded" ref="loadmore">
			<ul class="pl30rem pr30rem bg-white">
				<li class="layout border-b pt30rem pb30rem">
					<img class="responsive-img shop-img mr30rem circle-8" :src="img_url + dataGroup.img" alt=""  v-if='dataGroup.img'>
					<div class="flex_1">
						<p class="fs32rem c333 ellipsis-more">{{ dataGroup.goods_name }}</p>
						<p class="pt15rem pb15rem"><span class="pt10rem pb10rem pl10rem pr10rem red fs24rem mr10rem circle-8" style="background-color:#fdf1f1">包邮</span><span class="pt10rem pb10rem pl10rem pr10rem red fs24rem circle-8" style="background-color:#fdf1f1">拼单省{{ dataGroup.save_price }}元</span></p>
						<p><strong class="fs34rem cxo-red-color mr20rem bold">￥{{ dataGroup.ping_price }}</strong> <span class="fs26rem c999">已拼{{ dataGroup.pin_number }}件</span></p>
					</div>
				</li>
			</ul>
			<div class="friend bg-white mb20rem pb40rem">
				<ul class="friend-list pt40rem pb40rem flex-center">
					<li class="border spell circle mr20rem" v-for=" (item,index) in dataGroup.userlist " :key="index">
						<img class="circle responsive-img" style="height:100%;" :src="img_url + item.user_headimg" alt="">
						<!-- <span class="fs16rem white cxo-red pl5rem pr5rem align-center" v-if="index == 0">拼主</span> -->
					</li>
	<!-- 
					<li class="border spell circle mr20rem">
						<img class="circle responsive-img" style="height:100%;" src="../../../assets/member/user.png" alt="">
					</li>
					<li class="border circle mr20rem">
						<img class="circle responsive-img" style="height:100%;" src="../../../assets/img14.png" alt="">
					</li>
					<li class="border circle mr20rem">
						<img class="circle responsive-img" style="height:100%;" src="../../../assets/img14.png" alt="">
					</li> -->
					<li class="border circle mr20rem" v-if="dataGroup.is_man == 0 ">
						<img class="circle responsive-img" style="height:100%;" src="../../../assets/img14.png" alt="">
					</li>
				</ul>
				<p class="align-center fs26rem c333">仅剩<i class="cxo-red-color">1</i>人，快呼唤小伙伴参加吧！</p>
				
				<div class="surplus flex-center mt35rem layout">
					<i class="fs26rem c333">剩余</i>
					<countdown :data="dataGroup.count_down" :type="true" v-if="dataGroup.count_down > 0"/>
					<i class="fs26rem c333 ml10rem">结束</i>
				</div>

				<!-- <div class="surplus flex-center mt35rem">
					<i class="fs26rem c333">拼单已满</i>
				</div> -->
				
				<button class="cxo-red w92 auto pt20rem pb20rem circle-8 white block mt55rem" @click="offered">{{ dataGroup.button_txt }}</button>
				<router-link tag="button" :to="'/'" class="cxo-red w92 auto pt20rem pb20rem circle-8 white block mt55rem">
					<p>
						<span>返回首页</span>
					</p>
				</router-link>
				<!-- <button class="cxo-red w92 auto pt20rem pb20rem circle-8 white block mt55rem">一键发起拼单</button> -->
			</div>

			<div class="more-group bg-white" v-if="join_data_count > 0">
				<div class="partner-title pl30rem pr30rem layout pt25rem pb25rem border-b" >
		 			<h2 class="fs28rem c333">{{ join_data_count }}人在寻找伙伴，快去参加</h2>
		 			<div class="prtmer-title-right">
		 				查看更多<i class="iconfont icon-right2"></i>
		 			</div>
		 		</div>
		 		<ul class="pl30rem pr30rem">
					<li class="layout pt25rem pb25rem border-b" v-for="item in joinData">
						<img class="list-left" :src="img_url + item.user_headimg" alt="">
						<div class="list-mid flex_1 flex-column ml30rem">
							<p class="ellipsis fs32rem">{{ item.nickname }}</p>
							<div class="list-mid-bottom layout-juscon mt10rem">
								<p class="flex-center fs24rem">还差<span class="cxo-red-color">1人</span>拼成
								</p>
							</div>
						</div>
						<div class="list-right flex-column flex-center align-center">
							<button class=" white fs28rem align-center mb10rem cxo-red" @click="offeredMore(item)">去参加</button>
							<p class="fs24rem c66 layout" v-if="item.time > 0">剩余<countdown :data="item.time"></countdown></p>
						</div>
					</li>
				</ul>
			</div>
			<!-- 选择颜色分类尺寸 -->
			<popup v-model="popupVisible" position="bottom" class="w100">
				<div class="pl30rem pr30rem pb20rem">
					<div class="shop flex-left pt30rem pb30rem border-b">
						<img :src="specificationImg"  alt="">
						<div class="shop-text ml30rem">
							<p class="fs28rem c333 mb20rem bold">{{ data.goods_name }}</p>
							<span class="fs28rem c999"v-if="stock">库存:{{ stock }}</span>	
							<span class="fs28rem c999"v-else>库存:{{ data.stock }}</span>	
							<span class="block fs28rem c999 mb25rem" v-if="selectString <= 1">请选择规格数量</span>
							<span class="block fs28rem c999 mb25rem" v-else>规格：{{ selectString }}</span>
							<strong class="fs30rem red" v-if="price">￥{{ price }}</strong>
							<strong class="fs30rem red" v-else>￥{{ data.price }}</strong>
						</div>
					</div>
					<div class="couponList">
						<div class="specification">
							<div v-for="(item,n) in data.spec_list">
								<h3 class="pt15rem pb15rem fs30rem c333">{{ item.spec_name }}</h3>
								<ul class="flex-left pt15rem pb15rem border-b">
									<li class="fs28rem c333 border circle-8 pt15rem pb15rem pl25rem pr25rem mr15rem" :class="{ on : subIndex[n] == index }" v-for="(items,index) in item.value" @click="selectCate(items,n,index)">{{ items.spec_value_name }}
									</li>
								</ul>
							</div>
						</div>
						<div class="mt30rem mb30rem">
							<h3 class="pt15rem pb15rem fs30rem c333">数量</h3>
							<div class="layout quantity">
								<i class="iconfont icon-jian1" v-if="quantity == 1"></i>
								<i class="iconfont icon-jian1" @click="quantity--" v-else></i>
								<input type="text" v-model="quantity">
								<i class="iconfont icon-jia1" @click="quantity++"></i>
							</div>
						</div>
						<button class="btn w100 align-center block cxo-red fs34rem white circle-8" @click="ascertain()">确定</button>
					</div>
				</div>
			</popup>
		</loadmore>
	</div>
</template>

<script>
	import { getGroupBooking,getJoinList,getYGDetail } from "@/api/goods-detail";
 	import Countdown from "@/components/Countdown";
 	import { Loadmore,Popup } from 'mint-ui';
 	import $toast from '@/utils/toast';
	export default{
		components: {
			Countdown,
			Loadmore,
			Popup
		},
		data()
		{
			return{
				uid              : localStorage.getItem('uid'),
				shop_img         : require('../../../assets/img13.png'),
				img_url          : process.env.IMG_URL,
				dataGroup        : [],
				data             : [],
				joinData         : [],
				canselect        : [],
				selectArr        : [],
				subIndex         : [],
				join_data_count  : '',
				allLoaded        : false,
				popupVisible     : false,
				page_index       : 1,
				quantity         : 1,
				type 			 : 'ping',
				sku_id           : '',
				price            : '',
				stock            : '',
				selectString     : '',
				specificationImg : '',
				parameterName    : '',
			}
		},
		watch:
		{
			selectString(newVal)
			{
				this.canselect = this.data.sku_list.filter(res => res.sku_name.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					if(this.type=='ping')
						this.price = this.canselect[0].ping_price;
					else
						this.price = this.canselect[0].price;

					this.stock = this.canselect[0].stock;
					this.sku_id = this.canselect[0].sku_id;
				}
				else
				{
					this.price = '';
					this.stock = '';
					this.sku_id = '';
				}
			}
		},
		created()
		{
			this.loadData();
			this.loadJoinData();
			this.loadDetailData();
			if(this.$route.query.fuid && !this.$route.query.uid)
				location.href = 'https://fish.qidongwx.com/service/Thirdlogin/wchatPublicLogin?fuid=' + this.$route.query.fuid + '&goods_id='+ this.$route.query.goods_id +'&type=4&order_id=' + this.$route.query.order_id;


			if(this.$route.query.uid)
				window.localStorage.setItem('uid',this.$route.query.uid)

		},
		methods:
		{
			refresh()
			{
				this.page_index = 1;
				this.loadData();
				this.loadJoinData();
				this.loadDetailData();
				setTimeout(()=>{
					// this.allLoaded = true;
					this.$refs.loadmore.onTopLoaded();
				},1000)
			},
			loadData()
			{
				let params = {
					order_id : this.$route.query.order_id,
					goods_id : this.$route.query.goods_id ? this.$route.query.goods_id : this.$route.query.goodsId,
					//fuid     : localStorage.getItem('uid'),
					fuid:this.$route.query.fuid,
				}
				getGroupBooking(params).then(res => {
					this.dataGroup = res.data;
				})
			},
			loadDetailData()
			{
				var params = {
					goods_id : this.$route.query.goods_id ? this.$route.query.goods_id : this.$route.query.goodsId,
					uid      : this.uid 
				}
				getYGDetail(params).then( res => {
					this.specificationImg = this.img_url + res.data.img_list[0].pic_cover_small;
					this.coupon_id = res.data.coupon_id;
					this.data = res.data;
					this.price = this.data.ping_price;
				})
			},
			loadJoinData()
			{
				// this.loading = true;
				var params = {
					page_index : this.page_index++, 
					page_size  : 10,
					fuid       : this.$route.query.fuid,
					goods_id   : this.$route.query.goods_id ? this.$route.query.goods_id : this.$route.query.goodsId,
				}
				getJoinList(params).then(res => {

					this.join_data_count = res.data.count;
					this.joinData = res.data.list;
					
					// if(res.data.list.length> 0 )
					// {
					// 	this.joinData = this.joinData.concat(res.data.list);
					// 	this.loading = false;
					// }
					// else if (params.page_index > 1)
					// {
					// 	$toast('没有更多了');
					// }
					// else
					// {
					// 	this.flag = false;
					// }
					// if(res.data.list.length < params.page_size)
					// {
					// 	this.loading = true;
					// }
				})
			},
			offered()
			{
				this.parameterName = 'offered';
				this.price = this.data.ping_price;

				if(!this.sku_id)
				{
					this.price = this.data.ping_price;
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity;
					this.$store.dispatch("skuidList", skuList);
					this.$router.replace('/shopping/group-pay?fuid=' + this.$route.query.fuid +'&ping=1&type=0')
				}
			},
			offeredMore(item)
			{
		
				if(item)
				{
					this.fuid = item.uid;
					this.parameterName = 'offered';
				}
				else{
					this.fuid = this.$route.query.fuid;
					this.parameterName = 'offered';
				}

				if(!this.sku_id)
				{
					this.price = this.data.ping_price;
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity;
					this.$store.dispatch("skuidList", skuList);
					this.$router.replace('/shopping/group-pay?fuid=' + this.fuid +'&ping=1&type=0')
				}
			},
			//判断规格，库存。
			ascertain()
			{
				if(this.data.spec_list.length > 0 && this.data.stock > 0 )
				{
					if(this.canselect.length != 1)
						return $toast('请选择规格数量');

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
				else
				{
					if(this.data.stock > 0){
						this.sku_id = this.data.sku_list[0].sku_id;
					}
					else
					{
						this.popupVisible = false;
						return $toast('库存不足');
					}

					if(this.parameterName == 'offered'){
						return this.offered();
					}

					return this.popupVisible = false;
				}
			},
			// 规格选中
			selectCate(item,n,index)
			{ 
				if (this.selectArr[n] != item.spec_value_name) 
				{
	                this.selectArr[n] = item.spec_value_name;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.selectString = this.selectArr.join(' '); 
				if(item.spec_img)
					this.specificationImg = this.img_url + item.spec_img;
			},
		}
	}
</script>

<style lang="less">
	html,body{
		height: 100%;
	}
	main{
		height: 100%;
	}
	.group-booking{
		height: 100%;
		.shop-img{
			width: 186/28rem;
		}
		.friend{
			.friend-list{
				li{
					width: 100/28rem;
					height: 100/28rem;
				}
				.spell{
					border-color:#ff0036;
					position: relative;
					span{
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translate(-50%,0%);
						border-radius:10rem;
						width: 2.5rem;
					}
				}
			}
		}
		.surplus{
			position: relative;
		}
		.surplus:after{
			position: absolute;
			content:'';
			width: 5rem;
			height: 1px;
			background-color: #818181;  
			left:15%;
			top:50%;
			transform: translate(-50%,50%);
		}
		.surplus:before{
			position: absolute;
			content:'';
			width: 5rem;
			height: 1px;
			background-color: #818181;  
			right:15%;
			top:50%;
			transform: translate(50%,-50%);
		}
		.more-group{
			ul
			{
				li
				{
					&:last-child
					{
						border-bottom:initial;
					}
					img
					{
						width: 100/28rem;
						height: 100/28rem;
						border-radius: 50%;
						object-fit: cover;
					}
					.list-right
					{
						button
						{
							width: 200/28rem;
							padding-top: 10/28rem;
							padding-bottom: 10/28rem;
							border-radius: 8px;
						}
					}
				}
			}
		}
		.mint-loadmore{
			height: 100%;
			.mint-loadmore-content{
				height: 100%;
			}
		}
		.mint-popup{
			.shop{
				img{
					width: 160/28rem;
					height: 160/28rem;
					object-fit: cover;
				}
			}
			.specification{
				overflow-y: scroll;
				ul{
					li{
						border-color:#666;
					}
					.on{
						border: 1px solid transparent;
						background-color: #ff0036;
						color: #fff;
					}
				}
			}
			.quantity{
				width: 200/28rem;
			}
			.btn{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.couponList{
			max-height: 450/28rem;
			overflow-y: scroll; 
		}
	}
</style>